<template>
  <div>
    <van-search v-model="value" shape='round' @input="inputFn" placeholder="请输入搜索关键词" />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if='resultList.length===0'>
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span class="hot_item"
         v-for='(item,index) in hotList' 
        :key='index'
        @click="selectHot(item.first)"
        >{{item.first}}</span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
>
 <!-- <van-cell  
    center 
    v-for="item in resultList" 
    :key='item.id'
    :title="item.al.name"  
    :label="`${item.ar[0].name} - ${item.al.name}`" >
      <template #right-icon>
      <van-icon name="play-circle-o" size="0.6rem"/>
  </template>
  </van-cell> -->
   <SongItem
  v-for="item in resultList"
  :key='item.id'
  :name='item.name'
  :author="item.ar[0].name"
  :id='item.id'
  
  />
</van-list>
     
    </div>
  </div>
</template>

<script>
// 目标: 铺设热搜关键字
// 1. 搜索框van-search组件, 关键词标签和样式
// 2. 找接口, api/Search.js里定义获取搜索关键词的请求方法
// 3. 引入到当前页面, 调用接口拿到数据循环铺设页面
// 4. 点击关键词把值赋予给van-search的v-model变量

// 目标: 铺设搜索结果
// 1. 找到搜索结果的接口 - api/Search.js定义请求方法
// 2. 再定义methods里getListFn方法(获取数据)
// 3. 在点击事件方法里调用getListFn方法拿到搜索结果数据
// 4. 铺设页面(首页van-cell标签复制过来)
// 5. 把数据保存到data后, 循环van-cell使用即可(切换歌手字段)
// 6. 互斥显示搜索结果和热搜关键词

// 目标: 搜索框-显示结果
// 1. @input给van-search绑定事件
// 2. @input事件中, 获取搜索结果保存 resultList中
// 3. 判断如果搜索关键字为空(.length === 0), 数组清空, 阻止网络请求执行(提前return)

// 目标: 加载更多
// 1. 集成list组件-定义相关的变量(搞懂变量的作用) -监测触底事件
// 2. 一旦触底, 自动执行onload方法
// 3. 对page++, 给后台传递offset偏移量参数-请求下一页的数据
// 4. 把当前数据和下一页新来的数据拼接起来用在当前 页面的数组里
// (切记) - 加载更多数据后,一定要把loading改成false, 保证下一次还能触发onload方法
import {hotSerachAPI,searchResultAPI} from '@/api'
import SongItem from '@/components/SongItem'
export default {
  data() {
    return {
      value:'',
      hotList:[],
      resultList:[],
      loading: false,
      finished: false,
      page:1
    };
  },
  components:{
SongItem
  },
  async created () {
    //async 无论如何都会返回一个promise实例
    const res=await hotSerachAPI()
    this.hotList=res.data.result.hots
  },
  methods: {
  async  getList(){
     return await searchResultAPI({
        keywords:this.value,
        limit:20,
        offset:(this.page-1)*20
      })
    },
  async  selectHot(word){
    this.page=1
    this.finished=false
      this.value=word
    const res=await this.getList()
    // console.log(res);
    this.resultList=res.data.result.songs
    this.loading=false
    },
   inputFn(){
   this.timer=setTimeout(async()=>{
    this.page=1
     this.finished=false
      if(this.value.trim()===''){
        this.resultList=[]
        return
      }
      const res= await this.getList()
      if(!res.data.result.songs){
        this.resultList=[]
        return 
      }
      this.resultList=res.data.result.songs
      this.loading=false
   },1000)
    },
  async  onLoad(){
      this.page++
      const res=await this.getList()
      if(!res.data.result.songs){
        this.finished=true
        this.loading=false
        return
      }
      this.resultList.push(...res.data.result.songs)
      this.loading=false
    }
  }
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>